<template>
  <div class="page">
    <m-header :title="langText&&langText.withdraw" :canback="Boolean(1)">
      <span @click="$router.push({name:'CenterRecord',query:{type:'tx'}})" class="txjl">{{langText&&langText.withdrawalsrecord}}</span>
    </m-header>
    <div class="body">
      <ul>
        <li class="list">
          <span class="list-name">{{langText&&langText.pswc}}</span>
          <input type="text" :placeholder="type" v-model="formData.addr" readonly @click="changeStyle"/>
          
        
          <div class="span_right_icon" @click="changeStyle">
                <p>
                <i class="iconfont iconshang mark"></i>
              </p>
              <p>
                <i class="iconfont iconxia mark"></i>
              </p>
          </div>

        </li>
        <!-- 可提取数量 -->
        <li class="list">
          <span class="list-name">{{langText&&langText.ceq}}</span>
          <input type="text" :value="text2"  :placeholder="langText&&langText.penw" readonly/>
        </li>
        
        <!-- 提取数量 -->
        <li class="list">
          <span class="list-name">{{langText&&langText.extractablequantity}}</span>
          <input type="text" :placeholder="langText&&langText.penw" v-model="formData.amount"/>
        </li>

        <li class="list">
          <span class="list-name">{{langText&&langText.withdrawaladdress}}</span>
          <input type="text" :placeholder="langText&&langText.penwa" v-model="cash_url" readonly/>
        </li>
        <!-- <li class="list list_code">
          <span class="list-name">{{langText&&langText.yzcode}}</span>
            <div class="item-flex code">
              <input type="text" :placeholder="langText&&langText.pevc" v-model="formData.catpcha" maxlength="4" />
              <button
                type="button"
                class="withdraw-code"
                :disabled="seconds>0"
                @click="sendCode()"
              >{{seconds==0?langText&&langText.sendcode:"("+seconds+"s)"}}</button>
            </div>
        </li> -->
      </ul>
      <div class="bot_1">
        {{text3}}
      </div>
      <div class="bot_2">
        {{text4}}
      </div>
      <button type="button" class="btn-submit btn-origin" @click="exch">{{langText&&langText.applicationextraction}}</button>
    </div>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { MyTxt,BaseTxt } from "@/assets/commonjs/lan.js";
import { Owner, Init } from "@/server/server.js";
import { Util,Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      allTxt:null,
      seconds: 0,
      withdrawInfo: {},
      type:'USDT',
      type1:'usdt',
      text2:null,
      text3:null,
      text4:null,
      cash_url:null,
      langText:null,
      formData: {
        addr: null,
        amount: null,
        catpcha: 8888,
        real_amount: 0.0,
        btc: null,
      }
    };
  },
  created () {
  },
  mounted() {
    // this.getApplyConfig();
    this.withdrawalConfig();
    this.initData();
    this.myAssets();
  },
  methods: {
    myAssets(){
      Owner.myAssets().then(res=>{
        if(res.code==1){
          // this.cash_url = res.data.credit2_url;
          this.cash_url = res.data.cash_url;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    goTo(name) {
      this.$router.push({ name: name });
    },
    initData(){
        this.allTxt = Object.assign({},MyTxt,BaseTxt)
        this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
    },
    withdrawalConfig(){
      Owner.withdrawalConfig().then(res=>{
        if(res.code==1){
          if(this.type=='USDT'){
            this.text2 = res.data.usdt.usdt +' USDT';
            this.text3 = res.data.usdt.usdt_min_tip;
            this.text4 = res.data.usdt.usdt_fee_tip;
          }else{
            this.text2 = res.data.fc.fc +' FC';
            this.text3 = res.data.fc.fc_min_tip;
            this.text4 = res.data.fc.fc_fee_tip;
          }
        }else{
          mui.toast(res.msg)
        }
      })
    },
    exch() {
      // let msg = Util.checkEmpry(this.formData);
      // if (msg) {
      //   mui.toast(msg)
      //   return;
      // }
      Load.loadStart(this);
      Owner.withdrawalApply({type:this.type1,amount:this.formData.amount,captcha:this.formData.catpcha,addr:this.formData.addr}).then(res => {
        if (res.code == 1) {
          Load.loadEnd(this);
          mui.toast(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
            Load.loadEnd(this);
          }, 500);
        } else {
          Load.loadEnd(this);
          mui.toast(res.msg);
        }
      });
    },
    //提现前获取
    // getApplyConfig() {
    //   Owner.getApplyConfig({}).then(res => {
    //     if (res.code == 1) {
    //       this.withdrawInfo = res.data;
    //       this.formData.addr = this.withdrawInfo.cash_url;
    //     }
    //   });
    // },
    sendCode() {
        // if (!this.rule.conFirmE.validate) {
        //   // mui.toast("请输入正确的邮箱账号！");
        //   mui.toast(this.langText&&this.langText.ptcea);
        //   return;
        // }
      this.seconds = 60;
      let get = setInterval(() => {
        this.$nextTick(() => {
          this.seconds = this.seconds - 1;
          if (this.seconds <= 0) {
            clearInterval(get);
          }
        });
      }, 1000);
      // 发送验证码
      Init.send({ email: this.userInfo.username, event: "apply" }).then(res => {
        mui.toast(res.msg);
      });
    },
    changeStyle(){
      this.type = this.type=='USDT'?'FC':'USDT';
      this.type1 = this.type1=='usdt'?'fc':'usdt';
      this.withdrawalConfig();
    }
  },
  computed: {
    ...mapGetters(["userInfo","lang","getLangId"])
  },
  watch: {
    "formData.amount"(val) {
      this.formData.real_amount = val - val * this.withdrawInfo.apply_charge;
      return this.formData.real_amount;
    },
    "formData.real_amount"(val) {
      this.formData.btc = parseInt(val / this.withdrawInfo.usd_to_btc_rate);
      return this.formData.btc;
    }
  }
};
</script>
<style scoped>
/* .page >>> .center {
  text-align: left !important;
  padding-left: 15%;
}
.page >>> .right {
  padding-right: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */
</style>

<style lang="less" scoped>
@import "~link-less";
.exlangEn {
  font-size: 24px;
}

.body {
  // padding: @margin-primary;
  padding: 20px 0;
  background-color: @bg-color;
  font-size: 30px;
  ul{
    width: 710px;
    margin-left: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
  }
  .list {
    .list-name {
      padding-left: 10px;
    }
    // .form-item {
    //   .display-flex();
    //   align-items: center;
    //   margin-bottom: 10px;
    //   padding: 10px 0;
    //   font-size: 34px;
    //   border-top: 1px solid #ddd;
    //   border-bottom: 1px solid #ddd;
      .item-flex {
        flex: 1;
        margin-left: 5px;
        display: flex;
        justify-content: space-between;
        .display-flex();
        > input {
          
          flex: 1;
          margin: 16px 20px 0 0;
          border: none;
          // border-right: 1px solid #ddd;
          border-radius: 0;
          border-bottom: 1px solid #DDDDDD;
        }
      }
    // }
    > input {
      margin-top: 16px;
    }
    input{
      border: none;
      border-bottom: 1px solid #DDDDDD;
      color: #aaaaaa;
      &::-webkit-input-placeholder{
        color: #aaaaaa;
      }
    }
    
    .withdraw-code {
      color: #fff;
      background-color: #4EB6AD;
      font-size: 30px;
      padding: 20px 60px;
    }
    &:first-child{
      position: relative;
      .span_right_icon{
        display: inline-block;
        position: absolute;
        right: 30px;
        top: 70px;
        p{ 
          color: #AAAAAA;
          height: 14px;
          &:last-child{
            margin-top: 4px;
          }
          }
        i{
          font-size: 24px;
          line-height: 0;
        }
      }
    }
  }
  .tips {
    padding: 0 @margin-primary;
    // margin-top: 10px;
    color: red;
  }
  .btn-origin {
    width: 90%;
    display: block;
    padding: 25px 0;
    margin: 30px auto;
    background-color: #4EB6AD;
    color: #fff;
  }
  .exch {
    width: 48px;
    height: 48px;
  }
  .bot_1{
    margin-top: 22px;
    margin-left: 50px;
    font-size:24px;
    color:rgba(102,102,102,1);
  }
  .bot_2{
    margin-left: 50px;
    font-size:24px;
    color:rgba(102,102,102,1);
  }
}

.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
    
    .txjl{
      position: absolute;
      top: 0;
      right: 20px;
      color: #666666;
    }
  }
}

</style>